<%@page import="entities.Link"%>
<%@page import="entities.Category"%>
<%@page import="java.util.List"%>
<%@page import="helpers.UrlHelper"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.TreeMap"%>
<%
TreeMap<String, String> check = (TreeMap<String, String>) request.getAttribute("check");
List<Category> categories = (ArrayList<Category>) request.getAttribute("categories");
String success = (String) request.getAttribute("success");
Link link = (Link) request.getAttribute("link");
String form = (String) request.getAttribute("form");
%>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:include page="/user/layouts/header.jsp" />

<link rel="stylesheet" type="text/css" href="/user/css/select2.css" />
<script type='text/javascript' src="/user/js/select2.min.js"></script>

<script type="text/javascript">
var status = "<%=link.getStatus()%>";
var category = "<%=link.getCategory()%>";
var type = "<%=link.getType()%>";

jQuery(document).ready(function () {
	jQuery("#profileTab li:eq(3)").addClass("active");
	jQuery(".select2").select2();
	jQuery("select[name=status]").val(status);
	jQuery("select[name=category]").val(category);
	jQuery("select[name=type]").val(type);
	
	var valType = jQuery("select[name=type]").val();
	if (valType == "reciprocal") {
		jQuery(".reciprocal").css("display", "");
	} else {
		jQuery(".reciprocal").css("display", "none");
	}
	
	jQuery("select[name=type]").change(function () {
		var val = jQuery(this).val();
		
		if (val == "reciprocal") {
			jQuery(".reciprocal").css("display", "");
		} else {
			jQuery(".reciprocal").css("display", "none");
		}
	});
});
</script>
                    <!-- change profile
					================================================== -->
                    <div class="tab-pane active" id="articles-form">
                    	<% if (success != null) { %>
			            <div class="alert alert-success"><%=success %></div>
			            <% } %>
                    
                    	<!-- form submit link
                        ================================================== -->          
                        <form method="post" action="" class="form-horizontal form-actions">
                            
                            <!-- link title & url
                            ================================================== -->
                            <div class="row-fluid control-group">
                                <div class="span6 control-group <%=check.get("name") != null ? "error" : ""%>">
                                    <label><i class="icon-pencil"></i> Title</label>
                                    <input type="text" id="inputTitle" name="name" placeholder="Title" class="input-block-level" value="<%=link.getName() %>" >
									<% if (check.get("name") != null) { %>
		                            <span class="help-inline"><%=check.get("name") %></span>
		                            <% } %>
                                </div>
                                <div class="span6 control-group <%=check.get("url") != null ? "error" : ""%>">
                                    <label><i class="icon-pencil"></i> Url</label>
                                    <input type="text" id="inputTitle" name="url" placeholder="Link Url" class="input-block-level" value="<%=link.getUrl() %>" >
									<% if (check.get("url") != null) { %>
		                            <span class="help-inline"><%=check.get("url") %></span>
		                            <% } %>
                                </div>
                            </div>
                            
                            <!-- article's description
                            ================================================== -->
                            <div class="control-group <%=check.get("description") != null ? "error" : ""%>">
                                <label><i class="icon-retweet"></i> Content (required)</label>
                                <textarea class="input-block-level" rows="10" name="description" placeholder="Description"><%=link.getDescription()%></textarea>
	                            <% if (check.get("description") != null) { %>
	                            <span class="help-inline"><%=check.get("description") %></span>
	                            <% } %>
                            </div>
                            
                            <!-- article's keyword
                            ================================================== -->
                            <div class="row-fluid control-group">
                                <div class="span4 control-group <%=check.get("category") != null ? "error" : ""%>">
                                    <label><i class="icon-pencil"></i> Category</label>
                                    <select name="category" class="select2 span10">
										<%
										for (int i = 0; i < categories.size(); i++) {
										%>
										<option value="<%=categories.get(i).getId()%>">
											|<% for (int j = 2 ; j <= categories.get(i).getLevel(); j++) {%>&nbsp;&nbsp;|<% } %>___
											<%=categories.get(i).getName()%> (<%=categories.get(i).getLevel()%>)
										</option>
										<%
										}
										%>
									</select>
									<% if (check.get("category") != null) { %>
		                            <span class="help-inline"><%=check.get("category") %></span>
		                            <% } %>
                                </div>
                                <div class="span4 control-group <%=check.get("status") != null ? "error" : ""%>">
                                    <label><i class="icon-pencil"></i> Status</label>
                                    <select name="status" class="<%=check.get("status") != null ? "error" : "" %>">
	                                	<option value="0" label="Inactive">Inactive</option>
										<option value="1" label="Pending">Pending</option>
										<option value="2" label="Active">Active</option>
	                                </select>
									<% if (check.get("status") != null) { %>
		                            <span class="help-inline"><%=check.get("status") %></span>
		                            <% } %>
                                </div>
                                
                                <div class="span4 control-group <%=check.get("type") != null ? "error" : ""%>">
                                    <label><i class="icon-pencil"></i> Type</label>
                                    <select name="type" class="<%=check.get("type") != null ? "error" : "" %>">
	                                	<option value="free">Free Link</option>
										<option value="reciprocal">Free Link With Reciprocal</option>
										<option value="featured">Featured Link</option>
	                                </select>
									<% if (check.get("type") != null) { %>
		                            <span class="help-inline"><%=check.get("type") %></span>
		                            <% } %>
                                </div>
                                
                                <div class="reciprocal">
                                	<div class="span6 control-group <%=check.get("urlReciprocal") != null ? "error" : ""%>">
	                                    <label><i class="icon-pencil"></i> Reciprocal Link</label>
	                                    <input type="text" id="urlReciprocal" name="urlReciprocal" placeholder="Reciprocal Link" class="input-block-level" value="<%=link.getUrlReciprocal() %>" >
										<span class="help-inline">To validate the reciprocal link please include the following HTML code in the page at the URL specified above, before submiting this form:</span>
										<% if (check.get("urlReciprocal") != null) { %>
			                            <span class="help-inline"><%=check.get("urlReciprocal") %></span>
			                            <% } %>
			                            
	                                </div>
	                                <div class="span6 control-group <%=check.get("urlReciprocal") != null ? "error" : ""%>">
	                                    <label><i class="icon-pencil"></i> Source Reciprocal</label>
	                                    <textarea class="input-block-level" rows="5" name="sourceReciprocal" placeholder="Source Reciprocal"><%=link.getSourceReciprocal() %></textarea>
	                                </div>
                                </div>
                            </div>
                            
                            <!-- submit button
                            ================================================== -->
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                    </div>
                    
                    
<jsp:include page="/user/layouts/footer.jsp" />